<template>
    <div class="footer">
        <div class="footer_left" style="margin-left: 1rem;">
            <p>共有<span>{{ list.length }}</span>项，还剩<span>{{ undoNum }}</span>项</p>
        </div>
        <div class="footer_right" style="margin-right: 1rem;">
            <button @click="showHandler('all')">全部</button>
            <button @click="showHandler('done')">已完成</button>
            <button @click="showHandler('undo')">待完成</button>
            <button @click="showHandler('clear')">清空任务</button>
        </div>
    </div>
</template>

<script>
    export default{
        props:{
            list:Array
        },
        methods:{
            showHandler(){
                this.$emit("show",flag)
            }
        },
        computed:{
            undoNum(){
                let count = 0;
                this.list.forEach((item) => {
                    if(item.state == false){
                        count++
                    }
                })
                return count
            }
        }
    }
</script>

<style scoped>
.footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer_left span{
    color: #be5758;
    font-weight: bold;
}
.footer_right button{
    margin-right: 5px;
}
</style>